<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ABOUT</title>

    <!-- 动画库 -->

    <link rel="stylesheet" href="css/animate.min.css">

    <!-- bootstrap核心css -->

    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- 重置样式 -->

    <link rel="stylesheet" href="css/reset.less">

    <link rel="stylesheet" href="css/about.css">

</head>

<body>
    <div class="content">
        <!-- left -->

        <div class="left">
            <div class="header">
                <img src="./images/kappe.png" alt="" class="pic-one">
                <img src="./images/forcreatives.png" alt="" class="pic-two">
            </div>

            <ul class="nav">
                <a href="index.html">
                    <li class="Home">Home</li>
                </a>
                <a href="work.html">
                    <li class="Work">Work</li>
                </a>
                <a href="about.html">
                    <li class="About">About</li>
                </a>
                <a href="blog.html">
                    <li class="Blog">Blog</li>
                </a>
                <a href="#">
                    <li class="Services">Services</li>
                </a>
                <a href="contact.html">
                    <li class="Contact">Contact</li>
                </a>
            </ul>

            <div class="Filter">
                <p>Filter<span class="glyphicon glyphicon-th-large Filter-right"></span></p>
                <ul class="nav-bottom">
                    <a href="#" class="firt-a">
                        <li>All Works</li>
                    </a>
                    <a href="#">
                        <li>web design</li>
                    </a>
                    <a href="#">
                        <li>illustration</li>
                    </a>
                    <a href="#">
                        <li>photography</li>
                    </a>
                    <a href="#">
                        <li>wallpapers</li>
                    </a>
                    <a href="#">
                        <li>brochures</li>
                    </a>

                </ul>
            </div>

            <div class="left-bottom">
                <div class="share">
                    <img src="./images/webicon-flickr.png" alt="">
                    <img src="./images/webicon-googleplus.png" alt="">
                    <img src="./images/webicon-twitter.png" alt="">
                    <img src="./images/webicon-pinterest.png" alt="">
                    <img src="./images/webicon-dribbble.png" alt="">
                    <img src="./images/webicon-behance.png" alt="">
                    <img src="./images/webicon-facebook.png" alt="">
                </div>

                <div class="text">© 2014 Kappe, All Rights Reserved</div>

            </div>

        </div>

        <!-- right -->

        <div class="right">
            <!-- right-left -->

            <div class="right-left">
                <div class="pic">
                    <img src="./images03/Layer6.png" alt="">
                </div>
                <h3>Who We Are</h3>
                <p>
                    This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean
                    sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.
                    Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec
                    tellus a odio tincidunt auctor a ornare odio.
                </p>
                <p>
                    Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora
                    torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. Nullam ac urna eu felis
                    dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum
                    fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam
                    massa nisl quis neque. Suspendisse in orci enim.
                </p>
                <hr>
                <h3>Our Staff</h3>
                <div class="box">
                    <div class="item">
                        <img src="./images03/Layer7.png" alt="">
                    </div>
                    <div class="item">
                        <img src="./images03/Layer7.png" alt="">
                    </div>
                    <div class="item">
                        <img src="./images03/Layer7.png" alt="">
                    </div>
                    <div class="item">
                        <img src="./images03/Layer7.png" alt="">
                    </div>
                    <div class="item">
                        <p class="item-p">JOHN SMITH</p>
                        <p class="item-p">Web Developer</p>
                    </div>
                    <div class="item item-you">
                        <div class="you">
                            YOU
                        </div>
                    </div>
                </div>
            </div>

            <div class="right-right">

                <h3 class="right-one">Our Skills</h3>
                <div class="Progress">
                    <div class="web-p">
                        <p class="webp-one">Website Design</p>
                        <p>89%</p>
                    </div>
                    <div class="Progress-bar">
                        <div class="son"></div>
                    </div>
                    <div class="web-p">
                        <p>Website Development</p>
                        <p>97%</p>
                    </div>
                    <div class="Progress-bar">
                        <div class="son son-two"></div>
                    </div>
                    <div class="web-p">
                        <p>Plugins</p>
                        <p>85%</p>
                    </div>
                    <div class="Progress-bar">
                        <div class="son son-three"></div>
                    </div>
                    <div class="web-p">
                        <p>Front end</p>
                        <p>75%</p>
                    </div>
                    <div class="Progress-bar">
                        <div class="son son-four"></div>
                    </div>
                </div>

                <h3>Testimonials</h3>
                <div class="CEO-box">
                    <div class="CEO">
                        <img src="./images03/Layer12.png" alt="">
                        <p class="CEO-p"><i>Collis Ta’eed - CEO at Envato</i></p>
                    </div>
                    <p class="text">Sollicitudin lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem
                        nibh id
                        elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum
                        velit. Nam nec tellus a odio tincidunt. </p>
                </div>

                <h3>Services</h3>

                <ul class="right-bottom">
                    <li>• Web Design</li>
                    <li>• Photography</li>
                    <li>• Plugin Development</li>
                    <li>• Front-end</li>
                    <li>• Design from Scratch</li>
                    <li>• Website Maintenance</li>
                </ul>

            </div>
        </div>
</body>

</html>

<!-- jq库 -->

<script src="js/jquery-3.5.1.min.js"></script>

<!-- bootstrap核心js -->

<script src="js/bootstrap.min.js"></script>